<template>
	<view>
		<refresh :isTop="isTop" ref="refresh" :needVibrate="true" @isRefresh="isRefresh"></refresh>
		<scroll-view scroll-y="true" class="container999" @scroll="scrollTop" @touchstart="refreshStart"
			@touchmove="refreshMove" @touchend="refreshEnd">
			<!-- <navTopIndexTT title="" :scrollTopNum="scrollTopNum"></navTopIndexTT> -->
			<view class="topBox">
				<image class="width-set"
					src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/bg_top.png"
					mode="widthFix"></image>
				<view class="content-box" v-if="signListView && signListView.length">
					<view class="top-box">
						<view>
							已连续签到<text class="num-view">{{ continuousSignInDays }}</text>天,
							已累计<text class="num-view">{{ allDataSign }}</text>金币
						</view>
						<view class="right-box" @click="handleShowGuide">
							签到规则
						</view>
					</view>
					<view class="watch-sign-box">
						<view v-for="(item, index) in signListView" :key="index" class="line-box"
							:class="item.isSignIn ? 'active' : ''" @tap="signStatusChange('click')">
							<view v-if="index < 6" class="item-sign-box">
								<view class="title-day">第{{ stepSequence + 1 + index }}天</view>
								<view class="kb-box">
									<view class="num-kb-set" :class="(item.extraReward || index == 2) ? 'colorSet' : ''">
										<text>{{ item.extraReward ? (item.extraReward + item.stepReward).toFixed(0) :
											(item.stepReward).toFixed(0) }}</text>
										<text class="name-kb">K币</text>
									</view>
									<image v-if="item.extraReward || index == 2" class="sign-img-box"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/red_one.png"
										mode="widthFix"></image>
									<image v-else class="sign-img-box"
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/red_three.png"
										mode="widthFix">
									</image>
								</view>
								<view v-if="item.isSignIn" class="mask-sign">
									<image
										src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/red_end.png"
										mode="widthFix"></image>
								</view>
							</view>
							<view v-if="index === 6" class="item-sign-box2">
								<image class="bg-box2"
									src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/bg_item.png"
									mode="widthFix"></image>
								<view class="content-box-all">
									<view class="left-set">
										<view class="title-day">第{{ stepSequence + 1 + index }}天</view>
										<view>连续签到天天领K币</view>
										<!-- <view v-else>再签6天 领大红包</view> -->
									</view>
									<view class="kb-box">
										<view class="num-kb-set" :class="(item.extraReward || index == 6) ? 'colorSet' : ''">
											<text>{{ item.extraReward ? (item.extraReward + item.stepReward).toFixed(0) :
												(item.stepReward).toFixed(0) }}</text>
											<text class="name-kb">K币</text>
										</view>
										<image v-if="item.extraReward || index == 6" class="sign-img-box"
											src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/red_one.png"
											mode="widthFix"></image>
										<image v-else class="sign-img-box"
											src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/red_three.png"
											mode="widthFix">
										</image>
									</view>
									<view v-if="item.isSignIn" class="mask-sign">
										<image
											src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/red_end.png"
											mode="widthFix"></image>
									</view>
								</view>
								<image class="kb-icon-set"
									src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/kb_icon.png"
									mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="block-box1" style="padding-top: 20rpx;">

				<view v-if="recommendObj.length > 0" v-for="(sectionItem, sectionIndex) in recommendObj" :key="sectionIndex">
					<ttStyleFive ref="ttStyleFive" v-if="sectionItem.styleType == 'STYLE_23'" :title="sectionItem.name"
						:list="sectionItem.contents"></ttStyleFive>
					<ttStyleFour ref="ttStyleFour" v-if="sectionItem.styleType == 'STYLE_19'" :title="sectionItem.name"
						:list="sectionItem.contents" />
					<mayFollow :title="sectionItem.name" :list="sectionItem.contents" v-if="sectionItem.styleType == 'STYLE_1'"
						ref="mayFollow"></mayFollow>
					<oneLikeTT v-if="sectionItem.styleType == 'STYLE_2'" :title="sectionItem.name" :list="sectionItem.contents"
						ref="oneLikeTT"></oneLikeTT>
					<ttStyleThree ref="ttStyleThree" v-if="sectionItem.styleType == 'STYLE_18'" :title="sectionItem.name"
						:list="sectionItem.contents" />
					<!-- <view v-if="sectionItem.styleType == 'STYLE_23'" class="block-box margin-bottom-lg">
					<view class="title">
						<text>{{ sectionItem.name || '猜你会追' }}</text>
						<text v-if="sectionItem.contents.length > 5" class="more-icon" @tap="handleJumpMore('moreLove')">更多></text>
					</view>
					<view class="content-list style-two justify-between">
						<view class="item-box2" :class="((index + 1) % 3) === 0 ? 'no-right' : ''"
							v-for="(item, index) in sectionItem.contents" @tap="toDetail(item)" :key="index">
							<view class="img-box">
								<image lazy-load :src="item.contentInfo.coverImgUrl"></image>
							</view>
							<view class="title-box">{{ item.contentInfo.title }}</view>
							<view class="text-one">更新至第{{ item.contentInfo.updateOfEpisodes }}集</view>
						</view>
					</view>
				</view> -->
				</view>
				<!-- <view class="block-box margin-bottom-lg">
                <view class="title">
                    <text>{{ indexTitle || '猜你会追' }}</text>
                    <text v-if="indexList.length > 5" class="more-icon" @tap="handleJumpMore('moreLove')">更多></text>
                </view>
                <view class="content-list style-two justify-between">
                    <view 
                        class="item-box2"
						:class="((index + 1) % 3) === 0 ? 'no-right' : ''"
                        v-for="(item, index) in indexList" 
                        @tap="toDetail(item)"
                        :key="index"  
                    >
                        <view class="img-box">
                            <image lazy-load :src="item.contentInfo.coverImgUrl"></image>
                        </view>
                        <view class="title-box">{{ item.contentInfo.title }}</view>
                        <view class="text-one">更新至第{{ item.contentInfo.updateOfEpisodes }}集</view>
                    </view>
                </view>
            </view> -->


			</view>
			<view style="height: 68rpx;"></view>
			<!-- 继续 -->
			<lastWatch :nowItem="historyList[0]" v-if="isFirstLoad && historyList.length === 1"></lastWatch>
			<!-- 签到 -->
			<view v-if="showKbView" class="mov-view">
				<image class="img-box-one"
					src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/kb_move.gif"
					mode="widthFix"></image>
			</view>
			<zwyPopupAll :showClose="false" :maskCanClose="false" ref="zwyPopupSign">
				<view class="content-view flex flex-direction align-center">
					<image class="img-box-text"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/kb_view_icon3.png"
						mode="widthFix"></image>
					<!-- 开启订阅消息， -->
					<image class="img-box-text2"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/kb_view_icon2.png"
						mode="widthFix"></image>
					<view class="flex align-center margin-top-sets">
						<image class="img-box-one"
							src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/kb_view_icon.png">
						</image>
						<view class="text-xl text-set">
							+ {{ (nowItem.stepReward + nowItem.extraReward).toFixed(0) }}
							<text>{{ moneyName }} </text>
						</view>
					</view>
					<button @tap="handleClose" class="btn-set">开心收下</button>
					<image @tap="handleClose" class="close-btn"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/close_white.png">
					</image>
				</view>
			</zwyPopupAll>
			<zwyPopupAll :showClose="false" :maskCanClose="true" ref="popupGuide">
				<view class="guide-content">
					<image class="img-box-one"
						src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/active/sign_view.png"
						mode="widthFix"></image>
					<view class="guide-btn" @tap="handleCloseGuide">我知道了</view>
				</view>
			</zwyPopupAll>
		</scroll-view>
	</view>
</template>

<script>
import lastWatch from './lastWatch.vue';
import mayFollow from '../fx_xjc/components/mayFollow.vue';
import oneLikeTT from '../fx_xjc/components/oneLikeTT.vue';
import ttStyleThree from '../fx_xjc/components/ttStyleThree.vue';
import ttStyleFour from '../fx_xjc/components/ttStyleFour.vue';
import ttStyleFive from '../fx_xjc/components/ttStyleFive.vue';
import refresh from '../../components/refresh.vue';
export default {
	components: {
		lastWatch, mayFollow, oneLikeTT, ttStyleThree, ttStyleFour, ttStyleFive, refresh
	},
	props: {
		nowId: {
			type: String | Number,
			default: ''
		}
	},
	data() {
		return {
			moneyName: this.moneyName,
			listLength: 0,
			noMore: 0,
			indexList: [],
			realList: [], // 在追热剧长度
			nowWatchList: [],
			viewGoView: false, // 展示追剧更多
			recommendObj: {},
			pageNum: 1,
			pageSize: 6,
			stepSequence: 0,
			signListView: [],
			continuousSignInDays: 0, // 连续签到天数
			scrollTopNum: 0,
			indexTitle: '',
			nowItem: {
				stepReward: 0,
				extraReward: 0
			}, // 当前签到
			allDataSign: 0,
			showKbView: false,
			isFirstLoad: true,
			historyList: [],
			isTop: true,
			// nowObjThree: {},
			// relatedIndex:0
		};
	},
	computed: {
		lineIndex() {
			let indexNum = 0
			this.signListView.forEach((item, index) => {
				if (item.isSignIn) {
					indexNum = (index + 1)
				}
			})
			return indexNum
		}
	},
	methods: {
		async reset() {
			console.log('更新页面1')
			uni.showLoading({
				title: ''
			})
			this.getHistory()
			await this.getIndexConfig()
			await this.getSignActiveStatus()
			uni.hideLoading()
		},
		// 刷新touch监听
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e) {
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh() {
			this.getIndexConfig()
			this.$refs.ttStyleFour && this.$refs.ttStyleFour[0].changeIndex()
			this.$refs.ttStyleFive && this.$refs.ttStyleFive[0].changeIndex()
			this.$refs.mayFollow && this.$refs.mayFollow[0].changeIndex()
		},
		scrollTop(e) {
			this.scrollTopNum = e.detail.scrollTop
			if (e.detail.scrollTop <= 40) this.isTop = true;
			else this.isTop = false;
		},
		handleJumpIndex() {
			uni.reLaunch({
				url: '/pages/fx_xjc/fx_xjc'
			})
		},
		handleShowGuide() {
			this.$refs.popupGuide.show('mid')
		},
		handleCloseGuide() {
			this.$refs.popupGuide.close()
		},
		// 签到
		handleSign() {
			this.showKbView = true
			setTimeout(() => {
				this.showKbView = false
				this.$refs.zwyPopupSign.show('mid')
			}, 900)
		},
		handleJumpDetail(item) {
			if (!item.fakeId) return
			this.zwyRouter(`../video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`);
		},
		handleClose(type) {
			this.$refs.zwyPopupSign.close()

			if (type === 'jump') {
				this.handleJumpIndex()
			}
		},
		handleJumpMore(type) {
			uni.navigateTo({
				url: `../mayLike/mayLikeTwoTT?type=${type}`
			})
		},
		toDetail(item) {
			console.log(item)
			if (!item.fakeId && !item.contentInfo.fakeId) return
			this.zwyRouter(`../video/video?fakeId=${item.fakeId || (item.contentInfo || {}).fakeId}&compilationId=${item.compilationId || (item.contentInfo || {}).compilationId}`);
		},
		getHistory() {
			this.zwyRequest({
				url: `/cdp/user_history/compilations?pageNum=1&pageSize=10`
			}).then(res => {
				// if(this.isFirstLoad){
				// 	setTimeout(()=>{
				// 		this.isFirstLoad = false;
				// 	},5000);
				// }
				if (res) {
					this.historyList = res;
					this.$forceUpdate();
				}
			});
		},
		// 获取首页配置
		async getIndexConfig() {
			try {
				let res = await this.zwyRequest({
					url: '/cdp/section_group',
					method: 'GET',
					data: {
						sectionGroupTypeValue: 10
					}
				})
				// this.nowObjThree = (res.find(item=> item.styleType === 'STYLE_23') || {})
				this.recommendObj = res
				// this.indexTitle = this.recommendObj.name
				// this.indexList = this.nowObjThree.contents ? this.nowObjThree.contents.slice(0, 6) : []
				// this.indexList = this.nowObjThree.contents ? this.nowObjThree.contents : []
				// uni.stopPullDownRefresh();
				this.$refs.refresh.endAfter(); //刷新结束调用
				getApp().globalData.needRefresh = false;

			} catch (error) {
				console.log(error)
			}
		},

		// 获取签到活动状态
		async getSignActiveStatus(type) {
			try {
				if (type === 'viewSign') {
					this.handleSign()
				}

				let res = await this.zwyRequest({
					url: `/welfare/sign_in/getSignInStatusByActivityId?activityId=${this.nowId}`,
					method: 'GET'
				})
				await this.getKbAllNum()
				let {
					latestRewards,
					continuousSignInDays
				} = res || {}

				this.stepSequence = (Math.floor(continuousSignInDays / 7) * 7) || 0
				this.signListView = latestRewards || []
				this.continuousSignInDays = continuousSignInDays || 0
				console.log(211212)
				// 自动签到
				let nowDay = latestRewards && latestRewards.find(item => item.isToday)
				if (nowDay && !nowDay.isSignIn) {
					this.signStatusChange()
				}

				if (type === 'viewSign') {
					this.nowItem = this.signListView && this.signListView.find(item => item.isToday)
				}
			} catch (error) {
				console.log(error)
			}
		},
		// 累计金币查询
		async getKbAllNum() {
			try {
				let data = await this.zwyRequest({
					url: `/welfare/sign_in/getActivityRewards?activityId=${this.nowId}`,
					method: 'GET'
				})

				this.allDataSign = data
			} catch (error) {
				console.log(error)
			}
		},
		// 签到
		async signStatusChange(type) {
			try {
				if (type === 'click') {
					uni.showToast({
						title: `今天已签到`,
						icon: 'none'
					})
					return
				}
				let res = await this.zwyRequest({
					url: `/welfare/sign_in/doSignInByActivityId?activityId=${this.nowId}`,
					method: 'GET'
				})
				if (res) {
					this.getSignActiveStatus('viewSign')
				}

			} catch (error) {
				console.log(error)
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container999 {
	background: rgba(253, 253, 253, 1);
	height: 100vh;
	margin-bottom: 40rpx;
}

.content-view {
	margin-top: 220rpx;

	.img-box-text {
		width: 251rpx;
	}

	.img-box-text2 {
		width: 434rpx;
		margin-top: -20rpx;
	}

	.btn-set {
		width: 300rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
		border-radius: 80rpx;
		margin: 74rpx 0 45rpx;
		background: linear-gradient(0deg, #FE8445 0%, #FE471F 100%);
		border: none;

		&::after {
			border: none;
		}
	}

	.top-set {
		margin-top: 165rpx;
	}

	.mark-box-set {
		width: 360rpx;
	}

	.img-box-one {
		width: 68rpx;
		height: 68rpx;
		margin-left: -25rpx;
	}

	.img-box-two {
		width: 386rpx;
	}

	.close-btn {
		width: 50rpx;
		height: 50rpx;
	}
}

.block-box1 {
	display: flex;
	flex-direction: column;
	width: 710rpx;
	// padding: 31rpx;
	// border-radius: 30rpx;
	margin: 0 auto;

}

.block-box {
	display: flex;
	flex-direction: column;
	width: 710rpx;
	padding: 31rpx;
	border-radius: 30rpx;
	margin: 0 auto 30rpx;
	background: #ffffff;
	box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.09);

	.title {
		margin-left: 5rpx;
		font-size: 36rpx;
		margin-bottom: 20rpx;
		line-height: 50rpx;
		font-weight: 600;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.more-icon {
			font-weight: normal;
			font-size: 26rpx;
			line-height: 37rpx;
			color: #999999;
			margin-right: 13rpx;
		}
	}

	.content-list {
		display: flex;
		overflow: auto;

		&.style-two {
			flex-wrap: wrap;

			.no-right {
				margin-right: 0;
			}

			.item-box {
				margin-bottom: 21rpx;
			}
		}

		.item-box {
			display: flex;
			flex-direction: column;
			margin-right: 14rpx;

			.img-box-set {
				width: 165rpx;
				height: 265rpx;
				background: #F5F7FB;
				border-radius: 8rpx;

				image {
					display: table-cell;
					width: 70rpx;
					height: 70rpx;
				}

				.btn-set {
					font-size: 42rpx;
					margin-top: 12rpx;
				}
			}

			.img-box {
				width: 165rpx;
				height: 265rpx;
				border-radius: 13rpx;
				overflow: hidden;

				image {
					display: table-cell;
					width: 165rpx;
					height: 265rpx;
				}
			}

			.title-box {
				width: 100%;
				color: #333333;
				font-size: 28rpx;
				line-height: 42rpx;
				margin: 11rpx 0 3rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 165rpx;
				text-align: center;
			}
		}


		.item-box2 {
			display: flex;
			flex-direction: column;
			margin-bottom: 12rpx;

			.img-box-set {
				width: 203rpx;
				height: 327rpx;
				background: #F5F7FB;
				border-radius: 8rpx;

				image {
					display: table-cell;
					width: 70rpx;
					height: 70rpx;
				}

				.btn-set {
					font-size: 44rpx;
					margin-top: 16rpx;
				}
			}

			.img-box {
				width: 203rpx;
				height: 327rpx;
				border-radius: 13rpx;
				overflow: hidden;

				image {
					display: table-cell;
					width: 203rpx;
					height: 327rpx;
				}
			}

			.title-box {
				width: 100%;
				color: #333333;
				font-size: 30rpx;
				line-height: 42rpx;
				margin: 11rpx 0 3rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 203rpx;
			}
		}
	}
}

page {
	background-color: white !important;
	border-top: 1rpx solid #f6f6f6;
}

.topBox {
	position: relative;

	.width-set {
		width: 100%;
	}

	.content-box {
		width: 690rpx;
		min-height: 540rpx;
		height: 540rpx;
		background: linear-gradient(0deg, #FBF2E5, #FBE4C9);
		border-radius: 20rpx;
		padding: 21rpx 0 44rpx;
		position: absolute;
		left: 50%;
		top: 200rpx;
		transform: translateX(-50%);
	}
}

.content-box {
	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		line-height: 30rpx;
		margin-left: 10px;
		font-weight: 600;
		color: #8D3611;
		margin-bottom: 32rpx;

		.num-view {
			color: #DD1D21;
			font-size: 30rpx;
			line-height: 30rpx;
			margin: 0 10rpx;
		}

		.right-box {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 140rpx;
			height: 40rpx;
			background: #FCD277;
			border-radius: 20rpx 0px 0px 20rpx;
			font-weight: 400;
			color: #893B22;
			font-size: 24rpx;
		}
	}

	.watch-sign-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 21rpx;
		position: relative;

		.line-box {
			margin-bottom: 30rpx;

			.item-sign-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				position: relative;
				padding: 10rpx 0 5rpx;
				box-sizing: border-box;

				.title-day {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #8D3611;
				}

				.kb-box {
					position: relative;
					margin-top: 11rpx;

					.num-kb-set {
						position: absolute;
						left: 0;
						width: 100%;
						top: 19rpx;
						z-index: 1;
						font-size: 40rpx;
						line-height: 40rpx;
						display: flex;
						align-items: flex-end;
						justify-content: center;
						color: #fff;

						&.colorSet {
							color: #DF421E;
						}

						.name-kb {
							font-size: 24rpx;
							line-height: 32rpx;
							margin-left: 4rpx;
						}
					}

					.sign-img-box {
						width: 130rpx;
						display: table-cell;
					}

				}

				.mask-sign {
					position: absolute;
					left: 0;
					top: 0;
					background: rgba(255, 255, 255, 0.7);
					width: 100%;
					height: 100%;
					z-index: 2;
					display: flex;
					justify-content: center;
					align-content: center;
					border-radius: 10rpx;

					image {
						width: 131rpx;
						margin: 88rpx auto 0;

						display: table-cell;
					}
				}

			}

			.item-sign-box2 {
				width: 316rpx;
				height: 190rpx;
				position: relative;
				box-sizing: border-box;

				.content-box-all {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					padding: 10rpx 20rpx 12rpx 14rpx;
					width: 100%;
					height: 190rpx;

					.left-set {
						display: flex;
						flex-direction: column;
						color: #DF4621;
						font-size: 26rpx;
						font-weight: 600;
						min-width: 120rpx;

						.title-day {
							font-size: 24rpx;
							line-height: 24rpx;
							color: #8D3611;
							margin-bottom: 20rpx;
							font-weight: normal;
						}
					}
				}

				.kb-icon-set {
					position: absolute;
					right: -10rpx;
					bottom: -10rpx;
					display: table-cell;
					width: 84rpx;
				}

				.bg-box2 {
					width: 100%;
				}

				.kb-box {
					position: relative;
					margin-top: 6rpx;

					.num-kb-set {
						position: absolute;
						left: 0;
						width: 100%;
						top: 19rpx;
						z-index: 1;
						font-size: 40rpx;
						line-height: 40rpx;
						display: flex;
						align-items: flex-end;
						justify-content: center;
						color: #fff;

						&.colorSet {
							color: #DF421E;
						}

						.name-kb {
							font-size: 24rpx;
							line-height: 32rpx;
							margin-left: 4rpx;
						}
					}

					.sign-img-box {
						min-width: 157rpx;
						width: 157rpx;
						display: table-cell;
					}

				}

				.mask-sign {
					position: absolute;
					left: 0;
					top: 0;
					background: rgba(255, 255, 255, 0.7);
					width: 100%;
					height: 100%;
					z-index: 2;
					display: flex;
					justify-content: center;
					align-content: center;
					border-radius: 10rpx;

					image {
						width: 131rpx;
						margin: 88rpx auto 0;
						display: table-cell;
					}
				}
			}
		}
	}
}

.tower-swiper .tower-item {
	transform: scale(calc(0.5 + var(--index) / 10));
	margin-left: calc(var(--left) * 100upx - 150upx);
	z-index: var(--index);
}

.tower-item.none {
	opacity: 0.6 !important;
}

.tower-swiper .tower-item .swiper-item {
	border-radius: 13rpx;
	overflow: hidden;
	display: flex;
	justify-content: center;

	image {
		width: 345rpx;
		width: 242rpx;
		border-radius: 13rpx;
	}
}

.tower-swiper {
	width: 100%;
	height: 345rpx;
}

.margin-top-sets {
	margin-top: -80rpx;

	.text-set {
		color: #FEEE86;
		font-size: 60rpx;
		line-height: 60rpx;
		margin-left: 12rpx;
		display: flex;
		align-items: flex-end;

		text {
			font-size: 36rpx;
			line-height: 48rpx;
		}
	}
}

.mov-view {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);

	image {
		width: 100%;
	}
}

.guide-content {
	image {
		width: 600rpx;
		display: table-cell;
	}

	.guide-btn {
		width: 600rpx;
		height: 94rpx;
		background: #FF3B3E;
		border-radius: 0px 0px 30rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 36rpx;
	}
}</style>
